<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome Standalone Controls Example</title>
    <script type="module" src="../../dist/index.js"></script>
    <style>
      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-controller:not([audio]) {
        aspect-ratio: 16 / 9; /* set container aspect ratio if preload=none */
      }

      #wrapper {
        display: flex;
        flex-direction: column;
        width: 50vw;
        align-items: stretch;
      }

      #wrapper > media-control-bar {
        flex-grow: 0;
        flex-shrink: 1;
      }

      #wrapper > .spacer {
        background-color: var(--media-background-color, #000);
        flex-grow: 1;
      }

      #wrapper > .fullscreen-overlay {
        display: var(--fullscreen-overlay-display, none);
        /* Can use fixed since we're fullscreen */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        color: #ffffff;
      }

      #wrapper:is(:fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen) {
        --fullscreen-overlay-display: initial;
      }

      video {
        width: 100%; /* prevents video to expand beyond its container */
      }

      .examples {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Using a Wrapper Element with Media Chrome Example</h1>
      <p>
        This example shows how you can use a wrapper element for your Player UI
        or "chrome". It takes advantage of:
      </p>
      <ul>
        <li>
          Using "Standalone controls" via the
          <code>mediacontroller</code> attribute
        </li>
        <li>
          Targetting the wrapper instead of the <code>media-controller</code> via the
          <code>fullscreenelement</code> attribute
        </li>
        <li>
          Using CSS selectors and CSS variables to show an overlay only when in fullscreen.
        </li>
      </ul>

      <span id="wrapper">
        <media-controller fullscreenelement="wrapper" id="controller">
          <video
            playsinline
            slot="media"
            src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
          >
            <track
              label="English"
              kind="captions"
              srclang="en"
              default
              src="./vtt/en-cc.vtt"
            />
          </video>
        </media-controller>
        <div class="spacer"></div>
        <media-control-bar mediacontroller="controller">
          <media-play-button></media-play-button>
          <media-mute-button></media-mute-button>
          <media-seek-backward-button></media-seek-backward-button>
          <media-seek-forward-button></media-seek-forward-button>
          <media-volume-range></media-volume-range>
          <media-time-range></media-time-range>
          <media-time-display remaining showduration></media-time-display>
          <media-captions-button></media-captions-button>
          <media-playback-rate-button></media-playback-rate-button>
          <media-pip-button></media-pip-button>
          <media-fullscreen-button></media-fullscreen-button>
        </media-control-bar>
        <span class="fullscreen-overlay">
          <span>This is an overlay</span>
        </span>
      </span>

      <div class="examples">
        <a href="./">View more examples</a>
      </div>
    </main>
  </body>
</html>
